<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <meta name="generator" content="Hugo 0.98.0" />

  
  <meta name="description" content="走在通往幸福的路上">
  

  
  <link rel="apple-touch-icon" sizes="180x180" href="https://blog.v5u.win/apple-touch-icon.png">

  
  <link rel="icon" type="image/png" sizes="32x32" href="https://blog.v5u.win/favicon-32x32.png">

  
  <link rel="icon" type="image/png" sizes="16x16" href="https://blog.v5u.win/favicon-16x16.png">

  
  <link rel="manifest" href="https://blog.v5u.win/site.webmanifest">

  
  <link rel="mask-icon" href="https://blog.v5u.win/safari-pinned-tab.svg" color="">

  <meta name="msapplication-TileColor" content="">

  <meta name="theme-color" content="">

  
  <link rel="stylesheet" href="https://blog.v5u.win/css/bootstrap.min.css" />

  
  <title>Redux学习 | 为吾优</title>
  

  <style>
body {
  min-width: 300px;
}

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

.custom-navbar a {
  display: inline-block; 
  padding: 18px 0;
  margin-right: 1em; 
  font-weight: bold; 
}

.custom-navbar a:hover,
.custom-navbar a:focus {
  text-decoration: none; 
}

@media print {
  .custom-navbar {
    display: none;
  }
}

article {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
}


body {
  background-color: #fff;
}



body {
  color: #212529;
}



a {
  color: #007bff;
}



a:hover,
a:focus {
  color: #0056b3;
}



.custom-navbar {
  background-color: #212529;
}



.custom-navbar a {
  color: rgba(255,255,255,.75);
}



.custom-navbar a:hover,
.custom-navbar a:focus {
  color: rgba(255,255,255,1);
}



.container {
  max-width: 800px;
}





</style>
</head>

<body>
  <nav class="custom-navbar">
  <div class="container">
    
    <a href="/">文章</a>
    
    <a href="/tags/">标签</a>
    
    <a href="/about/">关于</a>
    
    <a href="/index.xml">RSS</a>
    
  </div>
</nav>
  
  <div class="container">
    <article>
      <h1>Redux学习</h1>
<p>yarn global add create-react-app</p>
<p>create-react-app demo0</p>
<p>yarn add antd</p>
<p>yarn add redux</p>
<p>mkdir src/store</p>
<p>redux dev chrome插件 开发用，在GitHub上redux项目看开发环境配置方式</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">store</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">createStore</span>(<span style="color:#a6e22e">reducer</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>                          
</span></span><span style="display:flex;"><span>                          <span style="color:#75715e">//如果浏览器有这个方法，就执行它。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    )
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> (<span style="color:#a6e22e">state</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">defaultState</span>, <span style="color:#a6e22e">action</span>)=&gt;{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">state</span>,<span style="color:#a6e22e">action</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// ** Reducer里只能接受state ，不能改变state 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">action</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;changeInput&#39;</span>) {
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// 所以用一个深拷贝接受state
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newState</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">state</span>))
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">newState</span>.<span style="color:#a6e22e">inputValue</span><span style="color:#f92672">=</span><span style="color:#a6e22e">action</span>.<span style="color:#a6e22e">value</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newState</span> <span style="color:#75715e">// 这里返回给store，让store修改变量，reducer不干这事
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">state</span>
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75715e">// 监听绑定，新版本不用写也可以监听，但是视图层没有同步更新数据，所以还是要写这个
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">storeChange</span><span style="color:#f92672">=</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">storeChange</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">subscribe</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">storeChange</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">value</span><span style="color:#f92672">=</span>{<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">inputValue</span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">storeChange</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">setState</span>(<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">getState</span>())
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>小技巧</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75715e">// file actionTypes.js
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// action 配置文件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 便于找错和code复用
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">CHANGE_INPUT</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;changeInput&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">CHANGE_ADD</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;addItem&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">CHANGE_DELETE</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;deleteItem&#39;</span>
</span></span></code></pre></div><p>redux三个小坑</p>
<ul>
<li>store必须是唯一的，多个store是坚决不允许的，只能有一个store空间</li>
<li>只有store能改变自己的内容，Reducer不能改变</li>
<li>Reducer必须是纯函数</li>
</ul>
<p>先来看什么是纯函数，纯函数定义：</p>
<blockquote>
<p>如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。</p>
</blockquote>
<p>比如传入date作为参数就不叫纯函数</p>
<p>工程化</p>
<p>TODOListUI.js UI 分离</p>
<p>无状态组件，不用class 使用方法 props参数，因为没有class的state所以性能会高一点</p>
<p>最大的特点就是只有UI</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">TodoListUI</span><span style="color:#f92672">=</span>(<span style="color:#a6e22e">props</span>)=&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> (
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">margin</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;10px&#39;</span>}}
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">inputValue</span>}<span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    );
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>Easy mock 接口测试 自定义数据 yapi</p>
<p>axios api请求</p>
<p>异步方法建议放在中间件中做</p>
<h2 id="中间件">中间件</h2>
<p>redux-thuck</p>
<p>thunk的作用是将函数处理为对象</p>
<p>saya 和thunk类似的中间件</p>

    </article>
  </div>

  
  
  

  
</body>

</html>